<script type="text/javascript">
var isSubmitAjax = true;
var jform = null;
var datagrid = null;

$(function(){
	datagrid = $("#datagrid").r9jasonDataTable({
		// online1DataTable extra params
		"idTr" : true, // assign <tr id='xxx'> from 1st columns array(aoColumns);
		"extraParam" : function(aoData){ // pass extra params to server
//			aoData.push( { "name": "filterCps", "value": $("#search_cps").val()  } );
//			aoData.push( { "name": "filterStatus", "value": $("#search_status").val()  } );
		},
		"reassignEvent" : function(){ // extra function for reassignEvent when JSON is back from server
			reassignDatagridEventAttr();
		},

		// datatables params
		"bLengthChange": true,
		"bFilter": false,
		"bProcessing": true,
		"bServerSide": true,
        "bAutoWidth": false,
		"sAjaxSource": "<?php echo url_for('financeList/cpsPriceSettingList') ?>",
		"sPaginationType": "full_numbers",
		"aoColumns": [
		              { "sName" : "a.f_id", "bVisible" : false},
		              { "sName" : "a.f_id",  "bSortable": false, "fnRender": function ( oObj ) {
                          $("#dgAddPanel").data("data_" + oObj.aData[0], {
                                f_id : oObj.aData[0]
                                , f_cps : oObj.aData[2]
                                , f_effective_date : oObj.aData[3]
                                , status_code : oObj.aData[4]
                                , createdBy : oObj.aData[5]
                                , created_on : oObj.aData[6]
                          });
                          if (oObj.aData[4] == "complete"){
                            return "";
                          }else{
		  				    return "<a id='editLink' href='#'>Edit</a>";
                          }
		  				}
		  			  },
                      { "sName" : "a.f_cps",  "bSortable": true},
                      { "sName" : "a.f_effective_date",  "bSortable": true},
		              { "sName" : "a.status_code",  "bSortable": true},
		              { "sName" : "createdBy",  "bSortable": true},
		              { "sName" : "a.created_on",  "bSortable": true}
		]
	});

    $("#btnAdd").button({
        text: true
        , icons: {
            primary: 'ui-icon-circle-plus'
        }
    }).click(function(event){
        event.preventDefault();

        $("#dgAddPanelId").val("");
        $("#dgAddPanel").dialog("open");
    });
}); // end $(function())

//all event in detail datagrid need to reassign because, every remote call, the DOM will be restructure again.
function reassignDatagridEventAttr(){
	$("a[id=editLink]").click(function(event){
		// stop event
		event.preventDefault();

		// event.target is <a> itself, parent() is <td>, while parent().parent() get <tr>
		//var id = alert("id = " +$(event.target).parent().parent().attr("id"));
		var id = $(event.target).parent().parent().attr("id");
        $("#dgAddPanelId").val(id);
        $("#dgAddPanel").dialog("open");
	});
}

</script>

<?php echo form_tag('finance/cpsPriceSetting', 'id=cpsForm') ?>
<div style="padding: 10px; top: 30px; position: absolute; width: 900px">
<div class="portlet">
    <div class="portlet-header">CPS Price Settings Listing</div>
    <div class="portlet-content">
	<table width="100%" border="0">
		<tr>
			<td>
			<table width="100%">
				<tr>
					<td>
                    <div>
					<table class="display" id="datagrid" border="0" width="100%" cellpadding="0" cellspacing="0">
                        <thead>
                            <tr>
								<th>id [hidden]</th>
                                <th>&nbsp;</th>
								<th>CPS</th>
								<th>Effective Date</th>
								<th>Status</th>
								<th>Created By</th>
								<th>Created Date</th>
							</tr>
                        </thead>
                    </table>
                    </div>
                    <div>
                        <button id="btnAdd">Add</button>
                    </div>
					</td>
				</tr>
			</table>
			</td>
		</tr>
	</table>
    </div>
</div>
</div>
<script type="text/javascript">
$(function(){
    $("#dgAddPanelEffectiveDate").datepicker({minDate: 0});
    $('#dgAddPanelCps').autoNumeric({
        mDec: 2
    });
    $("#dgAddPanel").dialog("destroy");
    $("#dgAddPanel").mgigDialog({
        open: function() {
            populateDgAddPanel();
        },
        close: function() {

        },
        buttons: {
            Submit: function() {
                $("#waiting").show(500);
                $.ajax({
                    type : 'POST',
                    url : "<?php echo url_for('finance/doSaveCpsPriceSetting') ?>",
                    dataType : 'json',
                    cache: false,
                    data: {
                        settingId : $('#dgAddPanelId').val()
                        , cps : $('#dgAddPanelCps').val()
                        , effectiveDate : $('#dgAddPanelEffectiveDate').val()
                        , effectiveTime : $('#dgAddPanelEffectiveTime').val()
                        , status : $('#dgAddPanelStatus').val()
                    },
                    success : function(data) {
                        if (data.error) {
                            $("#waiting").hide(500);
                            _errorMsg(data.errorMsg);
                        } else {
                            $("#dgAddPanel").dialog('close');
                            datagrid.fnDraw();
                            alert("Record Save Successfully.");
                        }
                    },
                    error : function(XMLHttpRequest, textStatus, errorThrown) {
                        $('#waiting').hide(500);
                        alert("Server connection error.");
                    }
                });
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });
});

function populateDgAddPanel() {
    $("#dgMsg").hide();
    if ($("#dgAddPanelId").val() == "") {
        $("#dgAddPanelCps").val("");
        $("#dgAddPanelEffectiveDate").val("");
        $("#dgAddPanelStatus").val("A");
    } else {
        var data = $("#dgAddPanel").data("data_" + $("#dgAddPanelId").val());

        var arr = data.f_effective_date.split(" ");
        $("#dgAddPanelCps").val(data.f_cps);
        $("#dgAddPanelEffectiveDate").val(arr[0]);
        $("#dgAddPanelEffectiveTime").val(arr[1]);
        $("#dgAddPanelStatus").val(data.status_code);
    }
}
</script>
<div id="dgAddPanel" style="display:none; width: 850px" title="User">
    <input type="hidden" id="dgAddPanelId">
    <table width="100%">
        <tr>
            <td colspan="3">
                <div class="ui-widget" id="dgMsg" style="display:none;">
                </div>
            </td>
        </tr>
    </table>
    <fieldset class="collapsible">
    <legend class="collapsible">Details</legend>
    <table cellpadding="3" cellspacing="3">
        <tr>
            <td width="30%">CPS</td>
            <td>:</td>
            <td><input type="text" id="dgAddPanelCps" class="text ui-widget-content ui-corner-all" size="25"></td>
        </tr>
        <tr>
            <td>Effective Date</td>
            <td>:</td>
            <td><input type="text" id="dgAddPanelEffectiveDate" class="text ui-widget-content ui-corner-all" size="25"></td>
        </tr>
        <tr>
            <td>Effective Time</td>
            <td>:</td>
            <td>
                <select id="dgAddPanelEffectiveTime" class="text ui-widget-content ui-corner-all">
                    <option value="00:00:00">00:00:00</option>
                    <option value="01:00:00">01:00:00</option>
                    <option value="02:00:00">02:00:00</option>
                    <option value="03:00:00">03:00:00</option>
                    <option value="04:00:00">04:00:00</option>
                    <option value="05:00:00">05:00:00</option>
                    <option value="06:00:00">06:00:00</option>
                    <option value="07:00:00">07:00:00</option>
                    <option value="08:00:00">08:00:00</option>
                    <option value="09:00:00">09:00:00</option>
                    <option value="10:00:00">10:00:00</option>
                    <option value="11:00:00">11:00:00</option>
                    <option value="12:00:00">12:00:00</option>
                    <option value="13:00:00">13:00:00</option>
                    <option value="14:00:00">14:00:00</option>
                    <option value="15:00:00">15:00:00</option>
                    <option value="16:00:00">16:00:00</option>
                    <option value="17:00:00">17:00:00</option>
                    <option value="18:00:00">18:00:00</option>
                    <option value="19:00:00">19:00:00</option>
                    <option value="20:00:00">20:00:00</option>
                    <option value="21:00:00">21:00:00</option>
                    <option value="22:00:00">22:00:00</option>
                    <option value="23:00:00">23:00:00</option>
                </select>
                </td>
        </tr>
        <tr>
            <td>Status</td>
            <td>:</td>
            <td><select id="dgAddPanelStatus" class="text ui-widget-content ui-corner-all">
                    <option value="active">active</option>
                    <option value="inactive">in-active</option>
                </select>
            </td>
        </tr>
    </table>
    </fieldset>
</div>
</form>